<template>
    <div class="page-box">
        <cube-scroll
                ref="scroll"
                :options="options"
                @pulling-down="onPullingDown"
                @pulling-up="onPullingUp"
        >
            <slot></slot>
        </cube-scroll>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                options: {
                    pullDownRefresh: {
                        threshold: 10,
                        txt: "刷新成功"
                    }, // 配置下拉刷新
                    pullUpLoad: {
                        threshold: 10,
                        txt: {
                            more: "上拉加载更多",
                            noMore: "没有更多数据"
                        }
                    } // 配置上拉加载，若要关闭可直接 pullUpLoad：false
                }
            };
        },
        beforeCreate() {
        },
        create() {
        },
        methods: {
            loadData() {
            },
            // 触发下拉刷新
            onPullingDown() {
                console.log("下拉刷新");
                this.$refs.scroll.forceUpdate();
                this.$refs.scroll.refresh();
            },
            // 触发上拉加载
            onPullingUp() {
                this.$emit('onDown')
                console.log("上拉加载");
                this.$refs.scroll.forceUpdate();
                this.$refs.scroll.refresh();
            }
        },
        mounted() {
            // 挂载
            this.loadData();

        }
    };
</script>

<style scoped type="text/stylus" lang="stylus">
    .page-box
        position fixed;
        top 0;
        bottom 0;
        left 0;
        right 0;
</style>
